<!DOCTYPE html>
<html lang="en">
<head>
<title>Look At Minsk</title>
<meta http-equiv="imagetoolbar" content='no' />
<meta charset="utf-8">

<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
<link rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="ext-3.4.0/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css"
	href="ext-3.4.0/examples/shared/examples.css" />

<script src="js/RowExpander.js"></script>
<script src="js/SlidingPager.js"></script>
<script src="js/PagingMemoryProxy.js"></script>

<!--<script src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>-->

<script src="openlayers/OpenLayers.js" type="text/javascript"></script>

<script src="js/GeoExt.js"></script>
<link rel="stylesheet" type="text/css"
	href="resources/css/geoext-all.css" />
<link rel="stylesheet" type="text/css"
	href="resources/css/gxtheme-gray.css" />

<script src="js/jquery.min.js"></script>

<link rel="stylesheet" href="css/my.css" />

<script type="text/javascript">
//OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
Ext.QuickTips.init();
var map, tree, select, store, gridPanel;
var mapBounds = new OpenLayers.Bounds(0.0, -1532.0, 2553.0, 0.0);
var mapMinZoom = 0;
var mapMaxZoom = 6;

// avoid pink tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

function init() {
	var options = {
		controls : [ new OpenLayers.Control.Navigation(),
		//new OpenLayers.Control.PanZoomBar(),
		//new OpenLayers.Control.LayerSwitcher(),
		new OpenLayers.Control.MousePosition(),
		//new OpenLayers.Control.Permalink({anchor : false}), 
		//new OpenLayers.Control.ScaleLine(),
		//new OpenLayers.Control.NavToolbar(),
		new OpenLayers.Control.OverviewMap({
			maximized : true
		}) ],
		maxExtent : new OpenLayers.Bounds(0.0, -1532.0, 2553.0, 0.0),
		maxResolution : 16.000000,
		numZoomLevels : 7
	};
	map = new OpenLayers.Map('map', options);

	var layer = new OpenLayers.Layer.TMS("City Map", "", {
		url : '',
		serviceVersion : '.',
		layername : '.',
		alpha : false,
		type : 'jpg',
		getURL : overlay_getTileURL
	});

	var stadium = new OpenLayers.Layer.Vector("Stadium", {
		projection : map.displayProjection,
		strategies : [ new OpenLayers.Strategy.Fixed() ],
		protocol : new OpenLayers.Protocol.HTTP({
			url : "kml/stadium.kml",
			format : new OpenLayers.Format.KML({
				extractStyles : true,
				extractAttributes : true
			})
		})
	});

	var hotels = new OpenLayers.Layer.Vector("Hotels", {
		projection : map.displayProjection,
		strategies : [ new OpenLayers.Strategy.Fixed() ],
		protocol : new OpenLayers.Protocol.HTTP({
			url : "kml/hotels.kml",
			format : new OpenLayers.Format.KML({
				extractStyles : true,
				extractAttributes : true
			})
		})
	});

	var cinemas = new OpenLayers.Layer.Vector("Cinemas", {
		projection : map.displayProjection,
		strategies : [ new OpenLayers.Strategy.Fixed() ],
		protocol : new OpenLayers.Protocol.HTTP({
			url : "kml/cinemas.kml",
			format : new OpenLayers.Format.KML({
				extractStyles : true,
				extractAttributes : true
			})
		})
	});

	var clubs = new OpenLayers.Layer.Vector("Clubs", {
		projection : map.displayProjection,
		strategies : [ new OpenLayers.Strategy.Fixed() ],
		protocol : new OpenLayers.Protocol.HTTP({
			url : "kml/clubs.kml",
			format : new OpenLayers.Format.KML({
				extractStyles : true,
				extractAttributes : true
			})
		})
	});

	var restars = new OpenLayers.Layer.Vector("Restars", {
		projection : map.displayProjection,
		strategies : [ new OpenLayers.Strategy.Fixed() ],
		protocol : new OpenLayers.Protocol.HTTP({
			url : "kml/restars.kml",
			format : new OpenLayers.Format.KML({
				extractStyles : true,
				extractAttributes : true
			})
		})
	});

	var dostoprim = new OpenLayers.Layer.Vector("Dostoprim", {
		projection : map.displayProjection,
		strategies : [ new OpenLayers.Strategy.Fixed() ],
		protocol : new OpenLayers.Protocol.HTTP({
			url : "kml/dostoprim.kml",
			format : new OpenLayers.Format.KML({
				extractStyles : true,
				extractAttributes : true
			})
		})
	});
	
	map.addLayers([ layer, stadium, hotels, cinemas, clubs, restars, dostoprim ]);
	select = new OpenLayers.Control.SelectFeature([ stadium, hotels,
			cinemas, clubs, restars, dostoprim ]);

	hotels.events.on({
		"featureselected" : onFeatureSelect,
		"featureunselected" : onFeatureUnselect
	});

	stadium.events.on({
		"featureselected" : onFeatureSelect,
		"featureunselected" : onFeatureUnselect
	});

	cinemas.events.on({
		"featureselected" : onFeatureSelect,
		"featureunselected" : onFeatureUnselect
	});

	clubs.events.on({
		"featureselected" : onFeatureSelect,
		"featureunselected" : onFeatureUnselect
	});

	restars.events.on({
		"featureselected" : onFeatureSelect,
		"featureunselected" : onFeatureUnselect
	});

	dostoprim.events.on({
		"featureselected" : onFeatureSelect,
		"featureunselected" : onFeatureUnselect
	});

	map.addControl(select);
	select.activate();

	function onPopupClose(evt) {
		select.unselectAll();
	}
	function onFeatureSelect(event) {
		var feature = event.feature;
		// Since KML is user-generated, do naive protection against
		// Javascript.
		var content = "<b>" + feature.attributes.name + "</b><br>"
				+ feature.attributes.description;
		popup = new OpenLayers.Popup.FramedCloud("chicken",
				feature.geometry.getBounds().getCenterLonLat(),
				new OpenLayers.Size(600, 400), content, null, true,
				onPopupClose);
		feature.popup = popup;
		map.addPopup(popup);
	}
	function onFeatureUnselect(event) {
		var feature = event.feature;
		if (feature.popup) {
			map.removePopup(feature.popup);
			feature.popup.destroy();
			delete feature.popup;
		}
	}
	map.zoomToExtent(mapBounds);

	//		var vector = new OpenLayers.Layer.Vector("Zones");
	//		map.addControl(new OpenLayers.Control.EditingToolbar(vector));
	//		map.addLayer(vector);

	var lonLat = new OpenLayers.LonLat(-766, 1276.5);
	if (!map.getCenter()) {
		map.setCenter(lonLat, 3);
	}

	mapPanel = new GeoExt.MapPanel({
		id : 'id_map',
		border : true,
		region : "center",
		map : map,
		zoom : 3,
		center : lonLat,
		title : 'Map Minsk',
		items : [ {
			xtype : "gx_zoomslider",
			vertical : true,
			height : 100,
			x : 10,
			y : 20,
			plugins : new GeoExt.ZoomSliderTip({
				template : "Zoom Level: {zoom}"
			})
		} ]
	});

	// create our own layer node UI class, using the TreeNodeUIEventMixin
	var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI,
			new GeoExt.tree.TreeNodeUIEventMixin());

	var treeConfig = [
	{
		nodeType : "gx_overlaylayercontainer",
		expanded : true,
		title : "Category",
		loader : {
			baseAttrs : {
				radioGroup : "foo",
				uiProvider : "layernodeui"
			}
		}
	}
	];
	treeConfig = new OpenLayers.Format.JSON().write(treeConfig, true);
	tree = new Ext.tree.TreePanel({
		border : true,
		region : "east",
		title : "Layers",
		width : 200,
		split : true,
		collapsible : true,
		collapseMode : "mini",
		autoScroll : true,
		loader : new Ext.tree.TreeLoader({
			applyLoader : false,
			uiProviders : {
				"layernodeui" : LayerNodeUI
			}
		}),
		root : {
			nodeType : "async",
			children : Ext.decode(treeConfig)
		},
		rootVisible : false,
		lines : false
	});

	// create feature store, binding it to the vector layer
	store1 = new GeoExt.data.FeatureStore({
		layer : dostoprim,
		fields : [ {
			name : 'name',
			type : 'string'
		},
		/*	{
				name : 'description',
				type : 'string'
			} 
		 */],
			proxy : new GeoExt.data.ProtocolProxy({
				protocol : new OpenLayers.Protocol.HTTP({
					url : "kml/dostoprim.kml",
					format : new OpenLayers.Format.KML({
						extractStyles : true,
						extractAttributes : true
					})
				})
			}),
		autoLoad : true
	});
	gridPanel1 = new Ext.grid.GridPanel({
		title : "Dostoprim",
		store : store1,
		columns : [ {
			header : "Name",
			width : 340,
			dataIndex : "name"
		}
		/*, {
			header : "Description",
			width : 250,
			dataIndex : "description"
		}*/
		],
		sm : new GeoExt.grid.FeatureSelectionModel()
	});
	
	store2 = new GeoExt.data.FeatureStore({
		layer : clubs,
		fields : [ {
			name : 'name',
			type : 'string'
		} ],
        proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.HTTP({
                url: "kml/clubs.kml",
                format: new OpenLayers.Format.KML({
					extractStyles : true,
					extractAttributes : true
				})
            })
        }),
		autoLoad : true
	});
	gridPanel2 = new Ext.grid.GridPanel({
		title : "Clubs",
		store : store2,
		columns : [ {
			header : "Name",
			width : 340,
			dataIndex : "name"
		} ],
		sm : new GeoExt.grid.FeatureSelectionModel()
	});
	
	// create feature store, binding it to the vector layer
	var hotelsJSON = new OpenLayers.Layer.Vector("hotelsJSON");
  		map.addLayer(hotelsJSON);
  		
  	var selectCtrl = new OpenLayers.Control.SelectFeature(hotelsJSON);
  	
	hotelsJSON.events.on({
        featureselected: function(e) {
            createPopup(e.feature);
        }        
    });  
	
	 var expander = new Ext.ux.grid.RowExpander({
	     tpl : new Ext.Template(
             '<p><b>Description:</b> {description}<br>',
             '<p><b>Address:</b> {address}</p>'
	     )
	 });
	function createPopup(feature) {
		var obj = feature.attributes;
		var content = "<b>Description: </b>" + obj.description + "<br>" +
						"<b>Address: </b>" + obj.address + "<br>" +
						"<b>Phone: </b>" + obj.phone + "<br>" +
						"<b>Fax: </b>" + obj.fax + "<br>" + 
						"<b>Url: </b><a href='" + obj.url +"'>" + obj.url + "</a>" + "<br>"+
						"<b>Img: </b><img width='200px' src='" + obj.img_src +"'/>" + "<br>";
        popup = new GeoExt.Popup({
            title: obj.name,
            location: feature,
            width:200,
            html: content,
            maximizable: false,
            collapsible: false
        });
        popup.on({
            close: function() {
                if(OpenLayers.Util.indexOf(hotelsJSON.selectedFeatures,
                                           this.feature) > -1) {
                    selectCtrl.unselect(this.feature);
                }
            }
        });
        popup.show();
    }
	
	store3 = new GeoExt.data.FeatureStore({
	layer : hotelsJSON,
			fields : [ {
				name : 'name',
				type : 'string'
			}, {
				name : 'description',
				type : 'string'
			}, {
				name : 'address',
				type : 'string'
			}
			],
			proxy : new GeoExt.data.ProtocolProxy({
				protocol : new OpenLayers.Protocol.HTTP({
					url : "json/casinos.json",
					format : new OpenLayers.Format.GeoJSON()
				})
			}),
			autoLoad : true
		});
	 var sm = new Ext.grid.CheckboxSelectionModel();
	 var smFS = new GeoExt.grid.FeatureSelectionModel();
		gridPanel3 = new Ext.grid.GridPanel({
			title : "Hotels",
			plugins: expander,
			store : store3,
			columns : [ 
			            //new Ext.grid.RowNumberer(),
			           //sm,
			            expander,
            {
				header : "Name",
				width : 340,
				dataIndex : "name"
			}, 
			/*{
				header : "Description",
				width : 340,
				dataIndex : "description"
			}, {
				header : "Address",
				width : 340,
				dataIndex : "address"
			}*/
			],
			sm : smFS,
			//sm: sm
			 // paging bar on the bottom
      
	        bbar: new Ext.PagingToolbar({
	            pageSize: 10,
	            store: store3,
	            displayInfo: store,
	            plugins: new Ext.ux.SlidingPager()
	        })
		});
	    //store3.load({params:{start:0, limit:10}});
		var tabs = new Ext.Panel({
			title : "Categories",
			region : 'west',
			collapsible : true,
			collapseMode : "mini",
			width : 350,
			split : true,
			layout : 'accordion',
			layoutConfig : {
				animate : true
			},
			border : false,
			items : [ gridPanel1, gridPanel2, gridPanel3 ]
		});
		/*
		 gridPanel = new Ext.grid.GridPanel({
		 title: "Dostoprim",
		 region: "west",
		 store: store,
		 width: 350,
		 layout: 'accordion',
		 collapsible : true,
		 collapseMode : "mini",
		 split : true,
		 columns: [{
		 header: "Name",
		 width: 100,
		 dataIndex: "name"
		 }, {
		 header: "Description",
		 width: 250,
		 dataIndex: "description"
		 }],
		 sm: new GeoExt.grid.FeatureSelectionModel() 
		 });
		 */
		new Ext.Viewport({
			id : 'viewport',
			layout : "fit",
			hideBorders : false,
			items : {
				layout : "border",
				deferredRender : false,
				items : [ tabs, mapPanel, tree ]
			}
		});
		$(".gx-zoomslider").css({
			'left' : '',
			'right' : '10px'
		});
	}
	function overlay_getTileURL(bounds) {
		var res = this.map.getResolution();
		var x = Math.round((bounds.left - this.maxExtent.left)
				/ (res * this.tileSize.w));
		var y = Math.round((bounds.bottom - this.maxExtent.bottom)
				/ (res * this.tileSize.h));
		var z = this.map.getZoom();
		if (x >= 0 && y >= 0) {
			return this.url + z + "/" + x + "/" + y + "." + this.type;
		} else {
			return "http://www.maptiler.org/img/none.png";
		}
	}
</script>
</head>
<body onload="init()">
<div id='contaner'>
<div id="leftPanel"></div>
<div id="rightPanel"></div>
<div id='panZoomBar_control'></div>
</div>
</body>
</html>